import React, { useMemo, useState } from 'react';
import { Form, Input, Alert, Tooltip, Button } from 'antd';

const PassCondition = ({ modeler, currentElement }: any) => {
  const [passConditionForm] = Form.useForm();

  React.useEffect(() => {
    let conditionExpression =
      currentElement.businessObject?.conditionExpression;
    if (conditionExpression) {
      passConditionForm.setFieldValue('condition', conditionExpression.body);
    }
  }, []);

  const changePassCondition = async () => {
    let data = await passConditionForm.getFieldsValue();
    let conditionExpression = currentElement.businessObject.get(
      'conditionExpression',
    );
    if (!conditionExpression) {
      conditionExpression = modeler.get('moddle').create('bpmn:Expression');
    }
    conditionExpression.body = data.condition;
    currentElement.businessObject.conditionExpression = conditionExpression;
  };

  const [showArrow, setShowArrow] = useState(true);
  const [arrowAtCenter, setArrowAtCenter] = useState(false);

  const mergedArrow = useMemo(() => {
    if (arrowAtCenter) return { arrowPointAtCenter: true };
    return showArrow;
  }, [showArrow, arrowAtCenter]);
  let exp = '${day > 0}';
  const text = <span>{exp}</span>;

  return (
    <div>
      <Form form={passConditionForm} style={{ margin: 10 }}>
        <Form.Item label="筛选条件" name="condition">
          <Input placeholder="${day > 0}" onBlur={changePassCondition} />
        </Form.Item>
      </Form>
    </div>
  );
};

export default PassCondition;
